//hook文件的命名规则     usexxx名字  是.ts文件

import { defineComponent,onMounted, onUnmounted, ref } from 'vue'
export default function useGetMousePosition (){
        //没有x，y  造x，y 
        const x = ref(0);
        const y = ref(0);
        
    
        //绑定事件对应的回调函数
        const updatePosition = (e:MouseEvent) =>{
          x.value = e.pageX;
          y.value = e.pageY;
        };
    
        onMounted(() => {
          // 在此时是最早能操作DOM的时刻
          document.addEventListener("click", updatePosition);
        });
    
        //离开取消事件
        onUnmounted(()=>{
          document.removeEventListener("click",updatePosition)
        })
    
    
        return {
          x,
          y
        }
}